<template>
  <div>
    <!-- 商品列表顶部导航区 -->
    <nav-comp :back="true" title="商品分类"></nav-comp>
    <!-- 商品列表区域 -->
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <van-card 
        v-for="item in goodList" 
        :key="item.id" 
        :price="item.price"
        desc="描述信息"
        :title="item.goodsname"
        :thumb="$pre+item.img"
        @click="goDesc(item.id)" 
        
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
       cateid:"",//商品分类id
            type:"",//分类类型
            page:1,//页码
            size:6,//每次请求数据的条数（分页偏移量）
            goodList:[],//商品列表数据
            loading: false,//是否处于加载状态:bool (没有加载数据：false 数据加载中：true)
            finished: false,//是否已加载完成:bool(有更多数据：false 已完成全部数据加载：true)
            refreshing:false,//是否处于更新中状态:bool (没有加载数据：false 数据加载中：true)
    };
  },
  mounted() {
    //1.获取商品分类页面跳转过来传递的参数
    this.cateid = this.$route.query.cateid
    this.type = this.$route.query.type

    //2.获取商品列表数据
    this.getList()
  },
  methods: {
    //1.获取商品列表数据
    getList(){
        //1.1解构获取请求参数
        let {cateid,type,page,size} =this
        this.$api.reqGoodList({cateid,type,page,size})
        .then(res=>{
            console.log(res)
            //1.2如果没有更多数据或只有一页数据 将finished重置为true表示已完成
            if(res.data.list.goodData==null || res.data.list.totalPage==1){
                this.finished=true;//已完成不要再加载更多数据
            }
            //1.3赋值页面数据 拼接新旧数据(下一页数据 [] [])
            this.goodList = this.goodList.concat(res.data.list.goodData? res.data.list.goodData:[])
            //1.4关闭加载动画 停止本次数据加载 当再次触底时再加载
            this.loading=false
            //1.5关闭刷新动画停止刷新
            this.refreshing=false
        })
        .catch(err=>console.log(err))
    },
    //2.监听页面上拉触底事件
     onLoad() {
      setTimeout(() => {
        ++this.page
        this.getList()
      }, 1000);
    },
    //3.监听用户下拉动作
    onRefresh() {
      setTimeout(() => {
        this.finished=false//再次打开 加载更多数据的开关
        this.page=1//最新的数据在第一页
        this.goodList=[]//赋空旧数据 展示旧数据
        this.getList()//重新获取第一页新数据
      }, 1000);
    },
    //4.跳转到商品的详情页面
    goDesc(id){
        this.$router.push('/gooddesc?id='+id)
    }
  },
};
</script>

<style scoped>
</style>
